<template>
  <view class="commonLim-list">
    <view class="searchclass">
      <view class="left">
        <up-search
          v-model="query.trackingNo"
          placeholder="请输入随工单编号"
          :clearabled="true"
          :showAction="false"
          @search="handleSearch"
        />
        <view v-show="isshow1" class="left">
          <div @click="handlefocus1">
            <up-search
              v-model="query.materialTypeName"
              placeholder="请选择材质"
              :clearabled="true"
              :showAction="false"
              disabled
            />
          </div>
          <div @click="handlefocus2">
            <up-search
              v-model="query.specificationName"
              placeholder="请选择规格型号"
              :clearabled="true"
              :showAction="false"
              disabled
            />
          </div>
        </view>
      </view>
      <view class="right">
        <up-button
          type="primary"
          @click="handleSearch"
          size="small"
          shape="circle"
          class="first"
          >搜索</up-button
        >
        <up-button
          type="primary"
          @click="handlecancel"
          size="small"
          shape="circle"
          >重置</up-button
        >
      </view>
    </view>
    <view class="upCcon">
      <up-icon
        :name="iconName"
        size="50rpx"
        color="#3c9cff"
        @click="handleicon"
      ></up-icon>
    </view>
    <scroll-view
      class="commonLim-listView"
      scroll-y
      @scrolltolower="onScrollToBottom"
    >
      <view v-show="state.rows.length">
        <view
          v-for="item in state.rows"
          :key="item.id"
          class="commonLim-listView-item"
        >
          <view class="upflex10" v-if="item.runStatus == '已运行'">
            <view class="bgtitle">{{ item.machineFullName }}</view>
            <view class="commonLim-listView-item-content" style="flex: 1">
              <view class="half width100">
                <label>随工单编号:</label>
                <text>{{ item.trackingNo }}</text>
              </view>
              <view class="half width100">
                <label>物料编码:</label>
                <text>{{ item.materialCode }}</text>
              </view>
              <view class="half width100">
                <label>材质:</label>
                <text>{{ item.materialTypeName }}</text>
              </view>
              <view class="half width100">
                <label>规格型号:</label>
                <text>{{ item.specificationName }}</text>
              </view>
              <view class="half width100">
                <label>分轮编号:</label>
                <text>{{ item.roundNo }}</text>
              </view>
              <view class="half width100">
                <label>分轮重量:</label>
                <text>{{ item.roundWeight }}</text>
              </view>
              <view class="half width100">
                <label>预分卷数:</label>
                <text>{{ item.plannedReelCount }}</text>
              </view>
              <view class="half width100">
                <label>已分卷数:</label>
                <text>{{ item.completedReelCount }}</text>
              </view>
            </view>
          </view>
          <view class="upflex10 minheight" v-else>
            <view class="bgtitle" style="background: #f56c6c">{{
              item.machineFullName
            }}</view>
            <view class="runSCalss">
              {{ item.runStatus }}
            </view>
          </view>
          <view
            class="commonLim-listView-item-button"
            v-if="item.runStatus == '已运行'"
          >
            <view class="box">
              <up-button
                type="primary"
                text="剪线"
                size="small"
                @click="cutTheCord(item)"
                v-if="item.plannedReelCount > item.completedReelCount"
              ></up-button>
              <up-button
                type="primary"
                text="剪线完成"
                size="small"
                @click="cutTheCordFINISH(item)"
                v-if="
                  item.plannedReelCount == item.completedReelCount &&
                  item.completedReelCount != 0
                "
              ></up-button>
            </view>
          </view>
        </view>
      </view>
      <up-empty mode="data" v-show="state.rows.length == 0"> </up-empty>
      <up-loadmore
        v-if="state.rows.length"
        :status="loadStatus"
        :icon="true"
        loadmore-text="轻轻上拉获取更多"
        loading-text="努力加载中..."
        nomore-text="没有更多了"
        @loadmore="handleloadMore"
      />
    </scroll-view>
  </view>
</template>

<script setup>
import { managementPage, confirmvoid, preManagemenTreel } from "./api.js";
import { useMemberStore } from "@/stores/modules/member";
import { commonListsFn } from "@/utils/index.js";
const deprops = defineProps(["machineId", "machine_code"]);
const memberStore = useMemberStore();
const iconName = ref("arrow-down");
const isshow1 = computed(() => {
  if (iconName.value == "arrow-down") {
    return false;
  } else {
    return true;
  }
});
const handleicon = () => {
  if (iconName.value == "arrow-down") {
    iconName.value = "arrow-up";
  } else {
    iconName.value = "arrow-down";
  }
};
const callback1 = async (obj) => {
  obj.machineId = deprops.machineId;
  obj.machine_code = deprops.machine_code;
  return managementPage(obj);
};
const {
  query,
  state,
  loadStatus,
  handleSearch,
  handlecancel,
  onScrollToBottom,
} = commonListsFn(callback1);
const cutTheCord = async (item) => {
  try {
    uni.showLoading({
      title: "加载中",
    });
    await preManagemenTreel(item.id);
    uni.showToast({ icon: "success", title: "剪线成功" });
    handleSearch();
  } finally {
    uni.hideLoading();
  }
};
const cutTheCordFINISH = async (item) => {
  try {
    uni.showLoading({
      title: "加载中",
    });
    await confirmvoid(item.id);
    uni.showToast({ icon: "success", title: "剪线完成" });
    handleSearch();
  } finally {
    uni.hideLoading();
  }
};

const handlefocus1 = () => {
  uni.navigateTo({
    url: `/pages/searchcaizhi/searchcaizhi?from=caizhi`,
  });
};
const handlefocus2 = async () => {
  if (query.value.materialTypeId) {
    uni.navigateTo({
      url: `/pages/searchcaizhi/searchcaizhi?from=guigexinghao&pId=${query.value.materialTypeId}`,
    });
  } else {
    uni.showToast({
      icon: "none",
      title: "请选择材质",
    });
  }
};
onShow(() => {
  if (memberStore.from_Page == "caizhi") {
    query.value.materialTypeId = memberStore.zemId;
    query.value.materialTypeName = memberStore.zemName;
    query.value.specificationId = "";
    query.value.specificationName = "";
  } else if (memberStore.from_Page == "guigexinghao") {
    query.value.specificationId = memberStore.zemId;
    query.value.specificationName = memberStore.zemName;
  }
  memberStore.zemId = "";
  memberStore.zemName = "";
  memberStore.from_Page = "";
  handleSearch();
});
</script>

<style lang="scss" scoped>
.bgtitle {
  background: #3c9cff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180rpx;
  flex-wrap: wrap;
}
.minheight {
  height: 100rpx;
}
.runSCalss {
  display: flex;
  align-items: center;
}
</style>